<template>
  <div v-loading="loading" element-loading-text="数据加载中，请稍后...">
    <el-row style="padding-top:30px;">
      <el-col :span="24">
        <el-card class="box-card" :body-style="{padding:'30px',backgroundColor:'#ffffff'}"
                 style="background-color: #EFF2F7;">
          <div slot="header" class="clearfix">
            <i class="el-icon-caret-right" style="color:red"></i><span
            style="line-height: 10px;">{{sysyear + '年第' + sysseason + '季度本地区季报统计工作进度'}}</span>
          </div>
          <el-row>
            <el-col :span="6">
              <div class="progress">
                <p>旅行社总数</p>
                <p class="con">
                  <span class="counter" style="color: #8a2be2;">{{ govprocess && govprocess.totalNum ? govprocess.totalNum :0 | currency}}</span>家</p>
              </div>
            </el-col>
            <el-col :span="6" >
              <div class="progress">
                <p>填报完成数</p>
                <p class="con"><span
                  class="counter" style="color:#6495ed;">{{ govprocess && govprocess.localReportedNum ? govprocess.localReportedNum : 0 | currency}}</span>家</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="progress">
                <p>退回重填数</p>
                <p class="con"><span
                  class="counter" style="color:#fb8d50;">{{ govprocess && govprocess.localReturnedNum ? govprocess.localReturnedNum : 0 | currency}}</span>家</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="progress">
                <p >审核完成数</p>
                  <p class="con">
                      <span class="counter" style="color:#32cd32;">{{ govprocess && govprocess.localFinishedNum ? govprocess.localFinishedNum : 0 | currency}}</span>家
                  </p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="padding-top:30px;">
      <el-col :span="24">
        <el-card class="box-card" :body-style="{backgroundColor:'#ffffff'}"
                 style="background-color: #EFF2F7;">
          <el-row>
            <el-col :span="6">
              <el-card class="box-card" :body-style="{padding:'30px',backgroundColor:'#ffffff'}"
                 style="background-color: #EFF2F7;">
                  <el-row>
                    <el-col :span="8" >
                      <div class="report-tbwc-imgdiv report-orange-background">
                          <img src="../../assets/images/tbwc.png" style="padding-top:10px;">
                      </div>
                    </el-col>
                    <el-col :span="16" class="report-container-center">
                      <el-row >
                          <el-col :span="24" class="report-percentage-title">
                              最终填报完成百分比
                          </el-col>
                          <el-col :span="24" class="report-percentage">
                              <span class="counter report-color-orange" v-text="govprocess && govprocess.completeFillPercentage ? govprocess.completeFillPercentage : 0"></span>  %
                          </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
              </el-card>
            </el-col>
            <el-col :span="6" :offset="1">
              <el-card class="box-card" :body-style="{padding:'30px',backgroundColor:'#ffffff'}"
                 style="background-color: #EFF2F7;">
                  <el-row>
                    <el-col :span="8" >
                      <div class="report-tbwc-imgdiv report-green-background">
                          <img src="../../assets/images/shwc.png" style="padding-top:10px;">
                      </div>
                    </el-col>
                    <el-col :span="16" class="report-container-center">
                      <el-row >
                          <el-col :span="24" class="report-percentage-title">
                              最终审核完成百分比
                          </el-col>
                          <el-col :span="24" class="report-percentage">
                              <span class="counter report-color-green" v-text="govprocess && govprocess.finishedPercentage ? govprocess.finishedPercentage : 0"></span>  %
                          </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="padding-top:30px;">
      <el-col :span="8">
        <el-card :body-style="{backgroundColor:'#ffffff',height:'178px'}" style="background-color: #EFF2F7;">
          <div slot="header" class="clearfix">
            <i class="el-icon-caret-right" style="color:red"></i><span style="line-height: 10px;">技术支持</span>
          </div>
          <div style="width:100%;">
            <p style="padding-top:10px;">
              咨询热线：010-64177010
            </p>
            <p style="padding-top:10px;">
              电子邮箱：lxstj@tripcn.cn
            </p>
            <p style="padding-top:10px;">
              旅游局QQ群：107319873
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  created(){
    this.loading = true;
    this.getTourismProcess().then(result => {
    },error => {
      this.$message.error(error.errorMessage);
    }).finally(()=>{
      this.loading = false;
    })
  },
  data() {
    return {
      loading:false
    };
  },
  computed: {
    ...mapGetters(["sysinfo", "govprocess"]),
    sysyear(){
      return this.sysinfo && this.sysinfo.year ?  this.sysinfo.year : new Date().getFullYear();
    },
    sysseason(){
      return this.sysinfo && this.sysinfo.season ?  this.sysinfo.season : 1;
    }
  },
  methods: {
    ...mapActions(["getTourismProcess"])
  }
};
</script>
<style scoped>
.notice-board {
  margin: 5px 10px;
}

.notice-board li {
  padding: 10px;
  list-style-type: none;
}

.notice-board li:hover {
  background-color: #f0f8ff;
}

.progress {
  width: 100%;
  text-align: center;
}

.con {
  padding-top: 20px;
}

.counter {
  font-size: 30px;
}

.report-tbwc-imgdiv {
  margin: 0px auto;
  vertical-align: middle;
  margin: 0 auto;
  text-align: center;
  width: 50px;
  height: 50px;
  margin-top: 10px;
}

.report-orange-background {
  background-color: rgba(253, 141, 72, 1);
}

.report-green-background {
      background-color: rgba(0, 153, 51, 1);
}
.report-show-number {
  margin: 0px auto;
  text-align: center;
}
.report-color-orange {
  color: #fb8d50;
}
.report-color-green {
  color:#009933;
}
.report-percentage-title {
  font-size: 16px;
  text-align: center;
}
.report-percentage {
  font-size: 18px;
  text-align: center;
  margin-top: 20px;
}
.report-container-center{
  margin: 0px auto;
}

</style>
